<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OSSJK 2.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
.detailTable_text {
	font-weight: bold;
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form">
		<!-- 基本信息模块 -->
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>基础信息</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0">
			<colgroup>
				<col width="15%">
				<col width="30%">
				<col width="15%">
				<col width="30%">
			</colgroup>
			<tbody class="detailTable">
				<tr>
					<td class="detailTable_text">名称</td>
					<td><input type="text" class="layui-input " lay-verify="required" placeholder="请输入真实姓名" name="name"></td>
					<td class="detailTable_text">学校</td>
					<td><select name="sid" id="sid" lay-verify="required" lay-filter="sid">
							<option value="">请选择学校</option>
					</select></td>

				</tr>
				<tr>
					<td class="detailTable_text">开始时间</td>
					<td><input type="text" name="sttm" id="sttm" lay-verify="required" autocomplete="off" class="layui-input">
					<td class="detailTable_text">结束时间</td>
					<td><input type="text" name="edtm" id="edtm" lay-verify="required" autocomplete="off" class="layui-input">
				</tr>
				<tr>
					<td class="detailTable_text">备注</td>
					<td colspan="3"><input type="text" class="layui-input" placeholder="" name="remarks"></input></td>
				</tr>
			</tbody>
		</table>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>子项目</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0" id="subproject" lay-filter="subproject">
			<thead>
				<tr>
					<th></th>
					<th>名称</th>
					<th>专业</th>
					<th>学年</th>
					<th>备注</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="6">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="subproject-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>子项目</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0" id="projectGroup" lay-filter="projectGroup">
			<thead>
				<tr>
					<th></th>
					<th>所属部门</th>
					<th>员工姓名</th>
					<th>担任角色</th>
					<th>备注</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="6">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="projectGroup-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="magt10 layui-right">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/js/index.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/constant.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '../../../static/plugin/layui_extends/'
		}).extend({
			selectN : 'selectN'
		}).use([ 'selectN', 'form', 'laydate', 'layer' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var selectN = layui.selectN;
			var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery;
			var insertApi = "../../../advisory/project/insert";
			var toUpdateDetailApi = "../../../advisory/project/toUpdateDetail";
			var updateDetailApi = "../../../advisory/project/updateDetail";
			var getDisciplineApi = "../../../getDiscipline";
			var getEmployeeApi = "../../../getEmployee";
			var getSchoolApi = "../../../getSchool";
			var insertMethod = "post";
			var updateDetailMethod = "put";
			var url = updateDetailApi;
			var method = updateDetailMethod;
			//初始化日期
			laydate.render({
				elem : '#sttm'
			});
			//初始化日期
			laydate.render({
				elem : '#edtm'
			});
			
			//添加角色分配
			$("#projectGroup-add").click(function() {
				$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml());
				form.render(); // 更新全部
				//显示删除按钮
				$(".deleteprojectGroup-btn").show();	 
  				//重新设置设置一对多列表的字段名
  				setProjectGroupText();
  				form.render();
			});
			//添加子项目
			$("#subproject-add").click(function() {
				$("#subproject-add").parent().parent().parent().before(subprojectHtml());
				form.render(); // 更新全部
				//初始化日期
				laydate.render({
					elem: document.getElementsByClassName('years')[document.getElementsByClassName('years').length-1],//指定元素
				  	type: 'year' 
			    });
				//显示删除按钮
				$(".deletesubproject-btn").show();	 
				var id= $("#sid").val()?$("#sid").val():'0';
				//获取所有专业信息
				//getDiscipline(id,"2");
  				form.render();
  				//重新设置设置一对多列表的字段名
				setSubprojectText();
			});
			var id = getUrlParam("id");
			//拼接字段
			function projectGroupHtml(index,obj) {
				if (!obj) {
					obj = {
						dname:'',
						did:'',
						type : ''
					}
				}
				if (!obj.remarks) {
					obj.remarks = ''
				}
				if (!index) {
					index = 1;
				}
				var str = null;
				str += '<tr class="projectGroup">                                                                                                   ';
				str += '	<td class="detailTable_text projectGroup-text">角色' +index+ '</td>                                                                               ';
				str += '	<td>                                                                                                                                      ';
				str += '		<input type="text" class="layui-input pgdname" readonly lay-verify="required" value="'+obj.dname+'">         ';
				str += '		<input type="hidden" class="pgdid" name="pgdid" value="'+obj.did+'">                     ';
				str += '	</td>                                                                                                                                     ';
			    str += '	<td> <input type="hidden" class="layui-input pgpid"  name="pgpid" value="'+id+'">                      ';
				str += '		<select name="pgeid" class="pgeid" lay-verify="required">                                                         ';
				str += '			<option value="">请选择员工</option>                                                                                    ';
				str += '		</select>                                                                                                                         ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td>                                                                                                                                      ';
				str += '		<select name="pgtype" class="pgtype" lay-verify="required">                                                         ';
				str += '			<option value="">请选择角色</option>                                                                                    ';
				str += '			<option value="1"'+(obj.type==1?'selected':'')+'>组长</option>                                                                                    ';
				str += '			<option value="2"'+(obj.type==2?'selected':'')+'>咨询</option>                                                                                    ';
				str += '			<option value="3"'+(obj.type==3?'selected':'')+'>讲师</option>                                                                                    ';
				str += '		</select>                                                                                                                         ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td><input type="text" class="layui-input pgremarks"  name="pgremarks" value="'+obj.remarks+'"></td>         ';
				str += '	<td><a class="layui-btn layui-btn-xs layui-btn-danger deleteprojectGroup-btn">删除</a></td>';
				str += '</tr>';
				return str;
			}
			var departmentIndex=0;
			//ztree
			var setting = {
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : onClick
				}
			};
			function onClick(e, trepgeid, treeNode) {
				console.log(departmentIndex);
				$(".pgdid").eq(departmentIndex).val(treeNode.id);
				$(".pgdname").eq(departmentIndex).val(treeNode.name);
				hideMenu();
				//查找员工
				loadAjax( "../../../getEmployee", "get", {
					"did" : treeNode.id
				}, function(response) {
					baseCallBack(response, function(response) {
						$(".pgeid").eq(departmentIndex).empty();
						var str = '<option value="">请选择员工</option>';
						for( data of response.data){
							str+='<option value="'+data.id+'">'+data.rname+'</option>';
						}
						$(".pgeid").eq(departmentIndex).append(str);
						form.render('select');
					});
				});
			}
			function showMenu(index) {
				var cityObj = $(".pgdname").eq(index);
				var cityOffset = $(".pgdname").eq(index).offset();
				departmentIndex=index;
				$("#treeDiv").css({
					left : cityOffset.left + "px",
					top : cityOffset.top + cityObj.outerHeight() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#treeDiv").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
					hideMenu();
				}
			}
			$("tbody").on("click", ".pgdname",function() {
				showMenu($(".pgdname").index(this))
			});
			loadAjax( "../../../getDepartment", "get", null, function(response) {
				baseCallBack(response, function(response) {
					$.fn.zTree.init($("#departmentTree"), setting, response.data);
				});
			});
			//拼接子项目字段
			function subprojectHtml(index, obj) {
				if (!obj) {
					obj = {
						name : '',
						did : '',
						years : ''
					}
				}
				if (!obj.remarks) {
					obj.remarks = ''
				}
				if (!index) {
					index = 1;
				}
				var str = null;
				str += '<tr class="subproject">                                                                                                   ';
				str += '	<td class="detailTable_text subproject-text">子项目' + index + '</td>                                                                               ';
				str += '	<td><input type="text" class="layui-input spname" lay-verify="required" placeholder="请输入项目名" name="spname" value="'+obj.name+'"></td>         ';
				str += '	<td><input type="text" class="layui-input did" lay-verify="required" placeholder="请输入专业名" name="did" value="'+obj.did+'"></td>         </td>                                                                                                                                     ';
				str += '	<td><input type="text" class="layui-input years" lay-verify="required/number" name="syears" value="'+obj.years+'"></td>         ';
				str += '	<td><input type="text" class="layui-input sremarks"  name="sremarks" value="'+obj.remarks+'"></td>         ';
				str += '	<td><a class="layui-btn layui-btn-xs layui-btn-danger deletesubproject-btn">删除</a></td>';
				str += '</tr>';
				return str;
			}
			function setSubprojectText() {
				for (var i = 1; i <= $(".subproject").length; i++) {
					$(".subproject-text").eq(i - 1).text("子项目" + i);
				}

			}
			function setProjectGroupText() {
				for (var i = 1; i <= $(".projectGroup").length; i++) {
					$(".projectGroup-text").eq(i - 1).text("角色" + i);
				}

			}
			//获取所有专业信息
			function getDiscipline(id,type){
				loadAjax( getDisciplineApi+"/"+id, "get", null, function(response) {
					var str='';
					if(type=='1'){
						$(".did").empty();
						str += '<option value="">请选择专业</option>';
					}
					$(".did").attr("disabled",true);
					baseCallBack(response, function(response) {
					    if (response.data && response.data.length) {
						    $(".did").attr("disabled",false);
						    for( data of response.data){
						  	    str+='<option value="'+data.id+'">'+data.name+'</option>';
						    }
					    }
					    if(type=='1'){
						    $(".did").append(str);
						}else{
						    $(".did").last().append(str);
						}
					});
					form.render('select');
				});
			}
			$("tbody").on("click", ".deletesubproject-btn", function() {
				$(this).parent().parent().remove();
				if ($(".subproject").length <= 1) {
					$(".deletesubproject-btn").hide();
				}
			});
			$("tbody").on("click", ".deleteprojectGroup-btn", function() {
				$(this).parent().parent().remove();
				if ($(".projectGroup").length <= 1) {
					$(".deleteprojectGroup-btn").hide();
				}
			});
			//回显表单
			var type = getUrlParam("type");
			////如果type=1，则是查看详细，type=2，则是编辑详细
			if (type != 3) {
				$("#form").append("<input type='hidden' name='id' value="+id+">");
				loadAjax( toUpdateDetailApi + "/" + id, "get", null, function(response) {
					baseCallBack(response, function(response) {
						console.log(response.data);
						fomrVal(form, "formTest", response.data.project);
						//获取所有学校信息
						loadAjax( getSchoolApi, "get", null, function(response2) {
							baseCallBack(response2, function(response2) {
								if (response2.data && response2.data.length) {
									for(var  v  of  response2.data ){
										var selected = "";
										if(v.id==response.data.project.sid){
											selected="selected";
										}
										$("#sid").append('<option value="'+v.id+'" '+selected+'>'+v.name+'</option>');
										form.render("select"); // 更新全部
									}
									//获取所有专业信息
									var id=response.data.project.sid;
									loadAjax( getDisciplineApi+"/"+id, "get", null, function(response3) {
									  baseCallBack(response3, function(response3) {
										  if (response3.data && response3.data.length) {
											  //回显子项目表单
											  var length = 0;
											  for ( var i in response.data.subproject) {
													length++;
													$("#subproject-add").parent().parent().parent().before(subprojectHtml(parseInt(i) + 1, response.data.subproject[i]));
													//拼接子项目的 专业 字段
													$(".did").attr("disabled",false);
													var str = '<option value="">请选择专业</option>';
													for( data of response3.data){
														var selected = "";
														if(data.id== response.data.subproject[i].did){
														 	selected="selected";
														}
												  		str+='<option value="'+data.id+'"'+selected+'>'+data.name+'</option>';
													}
													$(".did").eq(i).empty();
													$(".did").eq(i).append(str);
											  }
											  if (length == 0) {
													$("#subproject-add").parent().parent().parent().before(subprojectHtml());
											  }
											  if (length <= 1) {//隐藏删除按钮
													$(".deletesubproject-btn").hide();
											  }
											  length = 0;
											  for ( var i in response.data.projectgroup) {
											  	length++;
											  	$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml(parseInt(i) + 1, response.data.projectgroup[i]));
											  	//查找员工
											  	(function(index){
											  		loadAjax( "../../../getEmployee", "get", {
											  			"pgdid" : response.data.projectgroup[index].did
											  		}, function(response2) {
											  			baseCallBack(response2, function(response2) {
											  				console.log(index);
											  				$(".pgeid").eq(index).empty();
											  				var str = '<option value="">请选择员工</option>';
											  				for( data of response2.data){
											  					var selected = "";
											  					if(data.id== response.data.projectgroup[index].eid){
											  					 	selected="selected";
											  					}
											  			  		str+='<option value="'+data.id+'"'+selected+'>'+data.rname+'</option>';
											  				
											  				}
											  				$(".pgeid").eq(index).append(str);
											  				form.render('select');
											  			});
											  		});
											  	})(i);
											  	
											  }
											  if (length == 0) {
											  	$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml());
											  }
											  if (length <= 1) {//隐藏删除按钮
											  	$(".deleteprojectGroup-btn").hide();
											  }
											 
									      }else{
											  $(".did").attr("disabled",true);
										  }
										  form.render('select');
										  });	
									  	  //初始化日期
										  laydate.render({
											  elem : '.years',//指定元素
										  	  type: 'year' 
									      });
										  //如果type=1，则是查看员工详细，将所有按钮隐藏，所有文本不可编辑
									      if (type == 1) {
											  $("input").attr("disabled", true);
											  $("select").attr("disabled", true);
											  $("textarea").attr("disabled", true);
											  $("a").css("display", "none");
											  $("button").css("display", "none");
										  } 
										form.render();
									});
								}
							});
						});
					
					});
				});
			} else {
				//获取所有学校信息
				loadAjax( getSchoolApi, "get", null, function(response) {
					baseCallBack(response, function(response) {
						if (response.data && response.data.length) {
							for(var  v  of  response.data ){
								$("#sid").append('<option value="'+v.id+'">'+v.name+'</option>');
								form.render("select"); // 更新全部
							}
						}
					});
				});
				//最少添加一条子项目
				$("#subproject-add").parent().parent().parent().before(subprojectHtml());
				$(".deletesubproject-btn").hide();//最少添加一条子项目
				$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml());
				$(".deleteprojectGroup-btn").hide();
				//初始化日期
				laydate.render({
					elem : '.years',//指定元素
					type: 'year' 
				});
				$(".did").attr("disabled", true);
				form.render();

			}
			form.on('select(sid)', function(data){
				  var id= data.value?data.value:'0';
				  //获取所有专业信息
				  getDiscipline(id,"1");
				  form.render();
			});      
			//提交表单
			form.on("submit(submit)", function(data) {
				for (var i = 0; i < $(".sremarks").length; i++) {
					if ($(".sremarks").eq(i).val() == '') {
						$(".sremarks").eq(i).val(" ");
					}
				}
				for (var i = 0; i < $(".pgremarks").length; i++) {
					if ($(".pgremarks").eq(i).val() == '') {
						$(".pgremarks").eq(i).val(" ");
					}
				}
				if (type == 3) {
					url = insertApi;
					method = insertMethod;
				}
				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		});
	</script>
</body>
</html>